import styles from './index.less';
import { getPwdStrength, getPwdStrengthlength } from './strength';
import { Progress, Popover, Input } from 'antd';
const passwordStatusMap = {
  ok: {
    dom: (
      <div className={styles.success}>
        <span>强度：强</span>
      </div>
    ),
    status: 'success',
  },
  middle: {
    dom: (
      <div className={styles.middle}>
        <span>强度：中</span>
      </div>
    ),
    status: 'normal',
  },
  pass: {
    dom: (
      <div className={styles.warning}>
        <span>强度：弱</span>
      </div>
    ),
    status: 'exception',
  },
  poor: {
    dom: (
      <div className={styles.error}>
        <span>强度：较弱</span>
      </div>
    ),
    status: 'exception',
  },
};

function StrengthPwd({ value, onChange, mode, item }) {
  let data = passwordStatusMap[getPwdStrength(value) ?? 'poor'],
    val = getPwdStrengthlength(value) ?? 0;
  return (
    <Popover
      getPopupContainer={(node) => node.parentNode}
      content={
        <div style={{ padding: '4px 0' }}>
          <div>
            <div className={styles[`progress-${data.status}`]}>
              <span>{data.dom}</span>
              <Progress
                status={data.status}
                className={styles.progress}
                strokeWidth={6}
                percent={val == 4 ? 100 : (val + 1) * 20}
                showInfo={false}
              />
            </div>
          </div>
          <div style={{ marginTop: 10 }}>
            <span>您的密码须包含大小写字母，数字及特殊字符</span>
          </div>
        </div>
      }
      overlayStyle={{ width: 240 }}
      placement="right"
    >
      <Input.Password
        bordered={mode == 'simple' ? false : true}
        className={mode == 'simple' ? 'simple' : ''}
        placeholder={item.placeholder ? item.placeholder : item.title}
        allowClear
        type={item.type}
        maxLength={500}
        disabled={item.disabled}
        onChange={onChange}
      />
    </Popover>
  );
}

export default StrengthPwd;
